<template>
	<!-- <view class="container"> -->
	<!-- 	<view class="richtext"> -->
	<view>

		<view class="my-swiper" style="margin: 0; padding: 0;">
			<image mode="widthFix"  style="margin: 0; padding: 0; width: 100%;" :src="article.imgUrl[0]"></image>
		</view>
		<!-- 图片标题，卡片 -->
		<view>
			<uni-card :title="article.title" @click="onClick">
				<editor class="editor uni-body"  id="editor" @ready="onEditorReady" read-only="flase"></editor>
				<view slot="actions" class="card-actions">
					<view class="card-actions-item" @click="actionsClick('分享')">
						<uni-icons type="redo" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">点赞</text>
					</view>
					<view class="card-actions-item" @click="actionsClick('点赞')">
						<uni-icons type="heart" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">点赞</text>
					</view>
					<view class="card-actions-item" @click="actionsClick('评论')">
						<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">评论</text>
					</view>
				</view>
			</uni-card>
		</view>
		<view>
			<view class="uni-article__comment">
				<view class="uni-article__comment-box" v-for="comment in commentData" :key="comment.id">
					<view class="article-meta">
						<view class="article-header-image">
							<image class="image" :src="comment.author.portrait" mode="widthFix"></image>
						</view>
						<view class="article-header-content">
							<view class="article-header-title">
								<text>{{comment.author.name}}</text>
							</view>
							<view class="article-header-info"> {{comment.pubDate||''}}</view>
						</view>
					</view>
					<view class="uni-article__comment-centent">
						<user-reply v-if="comment.refer.length > 0" :digest="comment.refer"></user-reply>
						{{comment.content}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import userReply from '@/components/reply/reply.vue'
	import commentData from './comment.js'

	export default {
		data() {
			return {
				//滑块的高度(单位px)
				swiperHeight: 0,
				//当前索引
				currentIndex: 0,
				commentData: [],
				avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				},
				article: {
					imgUrl:[],
					title:"",
					content:""
				}
			}
		},
		components: {
			userReply,
		},
		methods: {
			getComment() {
				this.commentData = commentData.items;
			},
			update() {
				//获取一下是否有数据
				let that = this;
				setTimeout(() => {
					that.editorCtx.setContents({
						"html": that.article.content
					});
				}, 1000)
			},
			onEditorReady() {
				let that = this;
				uni.createSelectorQuery().in(this).select('#editor').context((res) => {
					console.log(res)
					that.editorCtx = res.context;
					that.update();
				}).exec((result) => {});
			},
			onClick(e) {
				console.log(e)
			},
			actionsClick(text) {
				uni.showToast({
					title: text,
					icon: 'none'
				})
			},
		},
		onLoad() {
			this.getComment();
			const eventChannel=this.getOpenerEventChannel();
			eventChannel.on("navToAdvertise", (res) => {
					console.log(res)
					this.article=res
			});
		},
		onUnload() {
			uni.$off("navToAdvertise")
		},
		onShow() {

		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '多功能富文本编辑器！',
				path: '/pages/editor/editor'
			}
		},
		onShareTimeline(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '多功能富文本编辑器！'
			}
		}
	}
</script>

<style lang="scss">
	.card-actions{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		padding-top:5px ;
		padding-bottom:5px ;
		border-top:1px beige solid;
	}
	.editor {
		height: 100%;
	}

	.swiper-view {}

	.swiper {
		width: 100%;
		
	}

	.swiper-item {
		display: flex;
		justify-content: center;
	}

	.swiper-img {

		border-radius: 5%;
	}

	.head-view {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: darkseagreen;
	}

	.head_icon {
		width: 40px;
		height: 40px;

		margin-left: 30px;
		border: 1px black solid;
	}

	.nickname {
		margin-left: 20px;
	}

	.article-meta {
		padding: 20rpx 20rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: flex-start;
		color: gray;
	}

	.article-header-image {
		width: 60rpx;
		height: 60rpx;
		flex-shrink: 0;
		/* border-radius: 50%; */
		overflow: hidden;
	}

	.article-header-image .image {
		width: 100%;
		height: 100%;
	}

	.article-header-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 10px;
		font-size: 24rpx;
		line-height: 1;
		width: 100%;
		/* height: 60rpx; */
	}

	.article-header-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		line-height: 2;
		color: #000;
	}

	.article-header-info {
		font-size: 24rpx;
		line-height: 1;
	}

	.article-top {
		display: flex;
		align-items: flex-end;
		font-size: 26rpx;
		line-height: 1;
		color: #999;
	}

	.article-top .image {
		width: 30rpx;
		margin-left: 5rpx;
	}

	.uni-article__comment-title {
		width: 100%;
		line-height: 3;
		font-size: 28rpx;
		color: #666;
		background: #f5f5f5;
		padding-left: 20rpx;
	}

	.uni-article__comment-centent {
		border-bottom: 1px #eee solid;
		padding: 0 20rpx;
		padding-left: 95rpx;
		padding-bottom: 20rpx;
		font-size: 14px;
		color: #333;
	}
</style>